<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="site/common::header('活动列表')" />
</head>
<body>
    <!-- 头部 -->
    <th:block th:include="site/common::navigation" />
    <!-- 面包屑 -->
    <div class="breadcroumb-area ">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcroumb-title text-center">
                        <h1>活动</h1>
                        <h5><a href="/">首页</a>/活动</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="container">
        <div class="row mt-5">
            <div class="col-lg-12 col-md-12 col-12  m-auto">
                <div class="col-12" style="font-size: 14px;text-align: center;">
                    <div class="dropdown act_dropdown" >
                        <button  v-on:click="oll" class="btn dropdown-toggle"  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            所有时间
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <div class="dropdown-item" v-on:click="Tweek">本周</div>
                            <div class="dropdown-item" v-on:click="Tmonth" >本月</div>
                        </div>
                    </div>
                    <div class="dropdown act_dropdown">
                        <button class="btn  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            所有状态
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" v-on:click="start1" >报名中</a>
                            <a class="dropdown-item" v-on:click="state1">活动中</a>
                            <a class="dropdown-item" v-on:click="end1">已结束</a>
                        </div>
                    </div>
                </div>
                <div class="row grid-list" id="activity-list">
                    <div class="col-lg-4 col-md-6 col-sm-12 col-12 grid-area" v-for="activity in activities">
                        <div class="activity-area wow fadeInUp" data-wow-delay=".5s">
                            <div class="activity-cover">
                                <a class="entry-title" v-bind:href="'/activity/' + activity.id" target="_blank">
                                    <img v-bind:src="activity.cover">
                                </a>
                            </div>
                            <div class="activity-info">
                                <div class="activity-title">
                                    <a class="play-icon" v-bind:href="'/activity/' + activity.id" target="_blank">
                                        {{activity.title}}
                                    </a>
                                </div>
                                <div class="activity-place">
                                    <i class="las la-map-marker"></i>&nbsp;{{activity.place}}
                                </div>
                                <div class="activity-date">
                                    <i class="las la-calendar"></i>&nbsp;{{activity.start_time}}
                                </div>
                                <a class="details " v-bind:href="'/activity/' + activity.id" target="_blank">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-5 mb-5 more">
                    <a href="javascript:;">查看更多</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <th:block th:include="site/common::footer" />
</body>
<th:block th:include="site/common::js" />
<script>
    var type = 'coming';
    var page = 1;

    var vm = new Vue({
        el: "#activity-list",
        data: {
            activities: []
        },
        mounted: function () {
            loadActivities(false);
        }
    });
    var vm1 = new Vue({
        el: ".act_dropdown",
        data: {
        },
        methods: {
        Tweek:function(){//本周
            console.log(666666666);
            type="week",
                page=0;
            loadActivities1(true)
        },
        Tmonth:function(){//本月
            type="month";
            page=0;
            loadActivities1(true)
        },
            oll:function () {
                type="coming";
                page=0;
                loadActivities(true)
            },
           /* state1:function () {
                type="state";
                page=0;
                loadActivities1(true)
            },
            end1:function () {
                type="end";
                page=0;
                loadActivities1(true)
            },
            start1:function () {
                type="start";
                page=0;
                loadActivities1(true)
            }*/
    }

    })

    $(".more").click(function () {
        page += 1;
        loadActivities(false);
    });

    function loadActivities(empty) {
        page += 1;
        var url = "/api/activity/" + type + "/" + page;
        $.get(url, function(result){
            if(empty) {
                vm.activities = [];
            }
            if(result.code == 0) {
                for(var i =0; i< result.rows.length; i++) {
                    vm.activities.push(result.rows[i]);
                }
            }
        });
    }
    function loadActivities1(empty) {
        page += 1;
        var url = "/api/active/" + type + "/" + page;
        $.get(url, function(result){
            if(empty) {
                vm.activities = [];
            }
            if(result.code == 0) {
                for(var i =0; i< result.rows.length; i++) {
                    vm.activities.push(result.rows[i]);
                }
            }
        });
    }


</script>
</html>